<template>
  <view>
    <swiper
      class="card-swiper"
      :circular="true"
      vertical="true"
      duration="500"
      @change="cardSwiper"
      style="height: 100vh"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <view class="swiper-item">
          <video
            :id="`video-${item._id}`"
            :src="item.src"
            loop
            style="height: 100vh; width: 100vw"
          ></video>
        </view>
        <view class="listleftbox">
          <list-left :item="swiperList" :num="cardCur"></list-left>
        </view>
        <view class="listrightbox">
          <list-right :item="swiperList" :num="cardCur"></list-right>
        </view>
      
      </swiper-item>
      
    </swiper>
        <view class="listheadbox">
          <list-head></list-head>
        </view>
           <view class="listnavbarbox">
          <list-navbar></list-navbar>
        </view>
  </view>
</template>

<script>
import listRight from "../../compoments/listRight.vue";
import listLeft from "../../compoments/listLeft.vue";
import listHead from "../../compoments/listHead.vue";

import ListNavbar from '../../compoments/listNavbar.vue';
export default {
  components: { listRight, listLeft,listHead, ListNavbar },
  data() {
    return {
      cardCur: 0,

      swiperList: [],
    };
  },
  created() {
    this.getVideo();
  },
  methods: {
    cardSwiper(e) {
      this.cardCur = e.detail.current;
      for (let i = 0; i < this.swiperList.length; i++) {
        const videoContext = uni.createVideoContext(
          `video-${this.swiperList[i]["_id"]}`,
          this
        );

        if (i === this.cardCur) {
          videoContext.play();
        } else {
          videoContext.stop();
        }
      }
    }, //获取视频
    getVideo() {
     
      uni.request({
        url: "https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video",
        method: "POST",
        data: {
          info: "get_video",
        },

        success: (res) => {
          //    console.log(res.data.data)
          // res.data.data.forEach(item=>console.log(item._id))
          this.swiperList = res.data.data;
       
        },
         
      });
       
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .listrightbox {
  z-index: 20;
  position: absolute;
  bottom: 50px;
  right: 10px;
  color: #ffffff;
}
.right_menu {
  margin-bottom: 60px;
  position: absolute;
  right: 30rpx;
  z-index: 990;

  .user_hp {
    margin-bottom: 30rpx;
    width: 50px;
    height: 50px;
    border: 2px solid #ffffff;
    background-color: #fff;
    border-radius: 50%;
  }

  .imgBox {
    display: flex;
    align-items: center;

    .spitemImage {
      width: 60rpx;
      height: 60rpx;
    }

    .rtext {
      text-align: center;
      color: #ffffff;
      font-size: 24rpx;
      margin-top: 10rpx;
      margin-bottom: 30rpx;
    }
  }
}
::v-deep .listleftbox {
  z-index: 20;
  position: absolute;
  bottom: 50px;
  left: 10px;
}
::v-deep .listheadbox {
  z-index: 20;
  position: absolute;
 top: 20px;
  left: 10px;
}
::v-deep .listnavbarbox {
  z-index: 20;
  position: absolute;
 top: 60px;
  left: 10px;
}


</style>
